<template>
  <a-modal
    title="编辑菜单/操作"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="dataModel && dataModel.id > 0" label="ID" v-model="dataModel.id">
          <a-input name="id" v-decorator="['id', { initialValue: 0 }]" disabled v-model="dataModel.id"/>
        </a-form-item>
        <a-form-item label="唯一键">
          <a-input name="key" v-model="dataModel.key"
            v-decorator="['key', {rules: [{required: true, min: 3, message: '请输入至少3个字符的唯一键名称！'}]}]"
            placeholder="此字段决定前端页面路由，请谨慎填写"
          />
        </a-form-item>
        <a-form-item label="名称">
          <a-input name="name" v-model="dataModel.name"
            v-decorator="['name', {rules: [{required: true, min: 2, message: '请输入至少2个字符的名称'}]}]"
          />
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-decorator="['type', {rules: [{required: true, message: '请选择'}]}]" name="type" v-model="dataModel.type" >
            <a-select-option value="menu">菜单</a-select-option>
            <a-select-option value="action">操作</a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="路径">
          <a-input v-decorator="['path']" :disabled="true" placeholder="自动根据唯一键key值生成"/>
        </a-form-item>-->
        <a-form-item label="组件" v-show="dataModel && dataModel.type != 'action' ">
          <a-select
            name="component"
            v-model="dataModel.component"
            v-decorator="['component', {rules: [{required: true, message: '请选择'}]}]"
            placeholder="请选择"
            show-search
            :filter-option="filterOption"
          >
            <a-select-option
              v-for="item in routerComponentsData"
              :key="item.ename"
            >{{ item.name || item.ename }} : {{ item .ename}}</a-select-option>
          </a-select>
          <!-- <a-input
            v-decorator="['component', {rules: [{required: true, min: 3, message: '请输入至少3个字符的组件名称'}]}]"
          />-->
        </a-form-item>
        <a-form-item label="图标" v-show="dataModel && dataModel.type != 'action' ">
          <a-input v-decorator="['icon']" name="icon" v-model="dataModel.icon"/>
        </a-form-item>
        <a-form-item label="排序" v-show="dataModel && dataModel.type != 'action' ">
          <a-input-number v-decorator="['sort']" name="sort" :min="0" :max="99999999" style="width:100%;" v-model="dataModel.sort"/>
        </a-form-item>
        <a-form-item label="状态" >
          <a-radio-group name="show" v-model="dataModel.show">
            <a-radio value="show">显示</a-radio>
            <a-radio value="un_show">隐藏</a-radio>
          </a-radio-group>
          <!-- <a-select v-decorator="['show', {rules: [{required: true, message: '请选择'}]}]" >
            <a-select-option value="show">显示</a-select-option>
            <a-select-option value="un_show">隐藏</a-select-option>
          </a-select>-->
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { isNull } from '@/utils/util'
import { getPermissionById } from '@/api/manage/admin'
import { routerComponents } from '@/router/router'

// 表单字段
const fields = ['description', 'id', 'key', 'name', 'type', 'path', 'icon', 'show', 'component', 'sort']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
    }
    return {
      form: this.$form.createForm(this),
      dataModel: {
         id: 0,
        key: '',
        name: '',
        type: 'menu',
        path: '',
        icon: '',
        show: 'un_show',
        component:'',
        sort:0
      },
      routerComponentsData: [],
    }
  },
  watch: {
    model: {
      handler: function (val, oldval) {
        this.resetForm()
        // alert(JSON.stringify(this.dataModel))     
        if (!isNull(val)) {
          if (val.type == 'edit') {
            getPermissionById({ id: val.id }).then((res) => {
              this.dataModel = res.data
              this.dataModel && this.form.setFieldsValue(pick(this.dataModel, fields))
              return
            })
          } 
        }        
        // this.dataModel && this.form.setFieldsValue(pick(this.dataModel, fields))
      },
      deep: true, //对象内部的属性监听，深度监听
      immediate: true,
    },
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))    
    //this.resetForm()
    //this.form.setFieldsValue(this.postParam) //设置form默认值
    this.routerComponentsData = this.toarray(routerComponents)
  },
  methods: {
    handleOk() {
      alert(JSON.stringify(this.dataModel) )
      this.$emit('update:visible', false)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    resetForm() {
      this.dataModel = {
        id: 0,
        key: '',
        name: '',
        type: 'menu',
        path: '',
        icon: '',
        show: 'un_show',
        component:'',
        sort:0
      }
      fields.forEach((v) => this.form.getFieldDecorator(v))    
      this.form.setFieldsValue(pick(this.dataModel, fields))
    },
    toarray(data) {
      var res = []
      var obj = {}
      for (var item in data) {
        obj = data[item]
        obj.ename = item
        res.push(obj)
      }
      return res
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  },
}
</script>
